import qs from "qs";
import { ref, reactive, onMounted, nextTick } from "vue";

import {
  GetAllTaskRemark,
  UpdateTaskRemark,
  DeleteTaskRemark
} from "@/api/admin/python";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { GetMenuBy } from "@/api/stu/bigdataprocessing";
import { type PaginationProps } from "@pureadmin/table";
export function useDescription() {
  // 分页
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const subcheck = ref();
  const loading = ref(false);
  const dataList = ref([]);
  const MenuNameDisa = ref(false);
  const ListFroms = reactive<any>({
    menuList: [],
    answerType: [
      { id: "1", displayName: "文字" },
      { id: "2", displayName: "图片" }
    ]
  });
  // 提交的表单
  const updateFrom = reactive({
    menuId: "",
    menuName: "",
    answerType: "",
    answerTest: "",
    answerCode: "",
    remark: ""
  });
  const updatePanelVisible = ref<boolean>(false);
  const VisibleTitle = ref("添加");
  const columns: TableColumnList = [
    {
      label: "序号",
      type: "index",
      minWidth: 100
    },
    {
      label: "菜单名称",
      prop: "menuName",
      minWidth: 200
    },
    {
      label: "答案类型",
      prop: "answerType",
      minWidth: 200,
      cellRenderer: ({ row }) => (row.answerType === "1" ? "文字" : "图片")
    },
    {
      label: "实验说明",
      prop: "answerTest",
      minWidth: 200,
      cellRenderer: ({ row }) => (`双击查看详情`)
    },
    {
      label: "实验代码",
      prop: "answerCode",
      minWidth: 200,
      cellRenderer: ({ row }) => (`双击查看详情`)
    },
    {
      label: "任务说明",
      prop: "remark",
      minWidth: 200,
      cellRenderer: ({ row }) => (`双击查看详情`)
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      slot: "operation"
    }
  ];
  const rules = {
    answerType: [
      {
        required: true,
        message: "请选择答案类型！",
        trigger: ["blur", "change"]
      }
    ],
    menuName: [
      {
        required: true,
        message: "请选择菜单名称！",
        trigger: ["blur", "change"]
      }
    ]
  };
  /********************************方法**********************************/

  // 添加与修改
  async function handleUpdate(row) {
    updatePanelVisible.value = true;
    if (row) {
      VisibleTitle.value = "修改";
      MenuNameDisa.value = true;
      nextTick(() => {
        updateFrom.menuId = row.menuId;
        updateFrom.menuName = row.menuName;
        updateFrom.answerType = row.answerType === "1" ? "文本" : "图片";
        updateFrom.answerTest = row.answerTest;
        updateFrom.answerCode = row.answerCode;
        updateFrom.remark = row.remark;
      });
      return;
    }
    MenuNameDisa.value = false;
    VisibleTitle.value = "添加";
  }

  // 保存任务说明
  async function SaveTopic(row: FormInstance | undefined) {
    (row as any).validate(async valid => {
      if (!valid) return;
      const { answerType, menuName, ...rest } = updateFrom;
      const payload = {
        ...rest,
        answerType: answerType?.id || answerType,
        menuId: menuName?.id || updateFrom.menuId,
        menuName: menuName?.displayName || menuName
      };
      const respone = await UpdateTaskRemark(payload);
      if (respone.success) {
        ElMessage.success(respone.msg);
        updatePanelVisible.value = false;
        GetTskList();
      } else {
        ElMessage.error(respone.msg)
      }
    });
  }

  //删除
  async function handleDelete(row) {
    ElMessageBox({
      title: '提示', //MessageBox 标题
      closeOnClickModal: false,
      message: '是否确定删除当前项?', //MessageBox 消息正文内容
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      // 确定
      const menuId = qs.stringify({ menuId: row.menuId });
      const respone = await DeleteTaskRemark(menuId);
      if (respone.success) {
        ElMessage.success(respone.msg);
        GetTskList();
      } else {
        ElMessage.error(respone.msg);
      }
    }).catch(() => { })

  }

  // 关闭弹窗
  function HideVisible(row) {
    row.resetFields();
    updatePanelVisible.value = false;
  }

  function handleSizeChange(val: number) {
    GetTskList();
  }

  function handleCurrentChange(val: number) {
    GetTskList();
  }

  // 获取任务说明列表
  async function GetTskList() {
    const data = qs.stringify({
      pageIndex: pagination.currentPage,
      pageSize: pagination.pageSize
    });
    const respone = await GetAllTaskRemark(data);
    if (respone.success) {
      dataList.value = respone.data.list;
      pagination.total = respone.data.totalCount;
    } else {
      ElMessage.error(respone.msg)
    }

  }

  // 获取模块名称 -- 菜单列表
  async function getModulName() {
    const menuid = qs.stringify({ moudleId: 687 });
    const respone = await GetMenuBy(menuid);

    function menus(data) {
      const arr = [];
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        if (data[i].childrens.length) {
          arr.push(...menus(item.childrens));
        }
        arr.push(item);
      }
      return arr;
    }
    if (respone.success) {
      ListFroms.menuList = menus(respone.data);
    } else {
      ElMessage.error(respone.msg)
    }

  }
  onMounted(() => {
    GetTskList();
    getModulName();
  });
  return {
    pagination,
    subcheck,
    loading,
    dataList,
    MenuNameDisa,
    ListFroms,
    updateFrom,
    updatePanelVisible,
    VisibleTitle,
    columns,
    rules,
    handleUpdate,
    SaveTopic,
    handleDelete,
    HideVisible,
    handleSizeChange,
    handleCurrentChange
  }
}
